<template>
    <div class="common-layout">
        <el-container style="margin-left: 200px; border: groove; border-width: 2px;">
            <div>
                <H1 style="margin-left: 100px;">管理角色</H1>
            </div>
            <el-header>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="角色名称:">
                        <el-input v-model="percan.RoleName" clearable style="width: 190px;" />
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="perlist">查询</el-button>
                        <el-button type="success" @click="nextadd">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="perdata" border style="width: 100%; height: 300px;">
                    <el-table-column prop="roleId" label="角色编号" width="100" />
                    <el-table-column prop="roleName" label="角色名称" />
                    <el-table-column prop="permissionName" label="权限"> </el-table-column>
                    <el-table-column prop="states" label="是否启用">
                        <template v-slot="scope">
                            {{ scope.row.states ? '启用' : '禁用' }}
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="100" />
                    <el-table-column prop="createdTime" label="创建时间">
                        <template v-slot="scope">
                            {{ moment(scope.row.createdTime).format('YYYY-MM-DD') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button type="warning" @click="upd(scope.row.roleId)">编辑</el-button>
                            <el-button type="danger" @click="open(scope.row.roleId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>
                    <el-pagination style="display: flex; justify-content: center; margin-top: 20px;"
                        v-model:current-page="page.Indpage" v-model:page-size="page.Pagsize" :page-sizes="[3, 5, 7]"
                        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { Read, Write } from '@/Http/axios'
import { ElMessage, ElMessageBox } from "element-plus";
import { useCounterStore } from '@/stores/counter';
import router from '@/router'
import moment from 'moment';
const store = useCounterStore();


const perdata = ref([
    {
        "roleName": "游客",
        "states": true,
        "createdTime": "2024-01-04T00:00:00",
        "permissionName": "成绩分析",
        "permissionURL": "//",
        "index": 4,
        "rpId": 4,
        "roleId": 4,
        "permissionId": 4
    },
])
//分页参数
const page = reactive({
    Indpage: 1,
    Pagsize: 3,
    totalCount: 0,
    totalPage: 1,
})

const percan = reactive({
    RoleName: "",
})
/**
* 获取权限列表数据
*/
const perlist = () => {
    Read.get('/Management/RoleShow', {
        params: {
            RoleName: percan.RoleName,
            Indpage: page.Indpage,
            Pagsize: page.Pagsize
        }
    }).then(res => {
        perdata.value = res.data.data.fdata;
        page.totalCount = res.data.data.totalCount;
        page.totalPage = res.data.data.totalPage;

    })
}

//钩子函数
onMounted(() => {
    perlist();
})

//添加跳转页面
const nextadd = () => {
    router.push('/RoleAdd')
}

const upd = (roleId: any) => {
    router.push({
        name: 'RoleUpdate',
        query: { roleId: roleId }
    })
}
//删除
const open = (roleId: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Write.delete("/Management/DeleteRole", {
                data: {
                    roleId: roleId,
                },
            }).then(res => {
                if (res.data.code == 500) {
                    ElMessage.success("删除成功！")
                    perlist();
                }
                else {
                    ElMessage.error("删除失败！")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

//侦听器
watch(page, () => {
    perlist();
})

</script>